<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script>
        function f1(){
            // 可以通过RegExp对象定义,语法:new RegExp(pattern,attribute)
            // pattern:正则表达式
            // attribute:修饰符
            // let regExp = new RegExp("[a-z]","i");
            let regExp = new RegExp("^[a-z]$","i");
            let inText = document.getElementById("inText").value;
            // test():表示指定字符串是否符合指定正则表达式的规则
            // 如果符合则返回true,否则返回false
            if(regExp.test(inText)){
                document.getElementById("s1").innerHTML = "<span style='color:green;'>格式正确</span>";
            } else{
                document.getElementById("s1").innerHTML = "<span style='color:red;'>您输入的数据格式有误</span>";
            }
        }
        function f2(){
            // 定义方式二:/pattern/attribute
            let regExp = /^[a-z]+$/i
            let inText = document.getElementById("inText2").value;
            if(regExp.test(inText)){
                document.getElementById("s2").innerHTML = "<span style='color:green;'>格式正确</span>";
            } else{
                document.getElementById("s2").innerHTML = "<span style='color:red;'>您输入的数据格式有误</span>";
            }
        }

        function checkPhone(){
            let regExp = /^[1][35789]\d{9}$/;
            let phone = document.getElementById("phone").value;
            if(regExp.test(phone)){
                document.getElementById("s3").innerHTML = "<span style='color:green;'>手机号码格式正确</span>";
            } else{
                document.getElementById("s3").innerHTML = "<span style='color:red;'>手机号码格式有误</span>";
            }
        }
        function f4(){
            let regExp = /^[\u4e00-\u9fa5]+$/g;
            let inText = document.getElementById("inText3").value;
            if(regExp.test(inText)){
                document.getElementById("s4").innerHTML = "<span style='color:green;'>格式正确</span>";
            } else{
                document.getElementById("s4").innerHTML = "<span style='color:red;'>格式有误</span>";
            }
        }
    </script>
</head>
<body>
<input type="text" id="inText">
<button onclick="f1()">定义方式一</button>
<span id="s1"></span>
<hr>
<input type="text" id="inText2">
<button onclick="f2()">定义方式二</button>
<span id="s2"></span>
<hr>
<input type="text" id="phone">
<button onclick="checkPhone()">校验手机号码</button>
<span id="s3"></span>
<hr>
<input type="text" id="inText3">
<button onclick="f4()">校验中文</button>
<span id="s4"></span>
</body>
</html>